﻿@{
    ViewBag.Title = "EditSong";
}

<h2>Edit Song</h2>

<b>Title:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Title" value="@ViewBag.song.Title"/>
<br />
<br />
<b>Release date:</b>
    <input type="date" id ="ReleaseDate" value="@ViewBag.date"/>
<br />
<br />
<b>Price:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Price" value="@ViewBag.song.Price"/>
<br />
<br />
<b>Genre:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Genre" value="@ViewBag.song.Genre" />
<br />
<br />
<b>Composer:</b>&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Composer" value="@ViewBag.song.Composer" />
<br />
<br />
<b>Lyricist:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Lyricist" value="@ViewBag.song.Lyricist" />
<br />
<br />
<b>Duration:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Duration" value="@ViewBag.song.Duration" />
<br />
<br />
<b>Artist(s):</b><br />
 @{
        int checkBoxNumber = 0;
        string artistList = "";
  }
  Is there any changes in the artists:

    @for (int i = 0; i < ViewBag.song.Artists.Count; i++)
    {
        if (i == 0)
        {
            artistList = ViewBag.song.Artists[i].Name;
        }
        else
        {
            artistList = artistList + " & " + ViewBag.song.Artists[i].Name;
        }
    }
@Html.Raw(artistList)&nbsp&nbsp&nbsp
    <select id="prevArtists">
        <option value="No">No</option>
        <option value="Yes">Yes</option>
    </select>
<br />If yes, pls select artists:<br />

    @foreach (var artist in ViewBag.artists)
    {
        <input type="checkbox" id="@("boxArtist" + checkBoxNumber)"/>
        
        <input type="text" id="@("checkBoxArtist" + checkBoxNumber)" name ="@(artist.ID)" hidden="hidden"/>
       
       <label for="@("boxArtist" + checkBoxNumber)"> @Html.Raw(artist.Name) </label>

        checkBoxNumber++;
        
        <br />
    }
    <input type="text" id="checkBoxCountArtist" value="@(checkBoxNumber)" hidden="hidden"/>
<br />
<br />
<br />
<br />
<input type="button" value="Update song" onclick="Update()" />





@* -- SCRIPTS -- *@
<script>
    var title = "";
    var releaseDate = "";
    var price = "";
    var genre = "";
    var composer = "";
    var lyricist = "";
    var artists = "";
    var duration = "";
    var changeArtists = false;

    function Update() {
        title = document.getElementById("Title").value;
        releaseDate = document.getElementById("ReleaseDate").value;
        price = document.getElementById("Price").value;
        genre = document.getElementById("Genre").value;
        composer = document.getElementById("Composer").value;
        lyricist = document.getElementById("Lyricist").value;
        duration = document.getElementById("Duration").value;

        var artistID;
        
        var isPrevArtists = document.getElementById("prevArtists").value;

        if (isPrevArtists == "No") {
            changeArtists = false;
            UpdatePost();
        }
        else {

            changeArtists = true;

            var checkBoxCount = parseInt(document.getElementById("checkBoxCountArtist").value);
            var first = "true";
            for (i = 0; i < checkBoxCount; i++) {
                checkBox = document.getElementById("boxArtist" + i);
                checkBoxStatus = checkBox.checked;

                if (checkBoxStatus == true) {
                    box = document.getElementById("checkBoxArtist" + i);
                    artistID = box.getAttribute("name");
                    if (first == "true") {
                        artists = artistID;
                        first = "false";
                    }
                    else {
                        artists = artists + ';' + artistID;
                    }

                }

            }

            if (title == "" || releaseDate == "" || price == "" || genre == "" || composer == "" || lyricist == "" || duration == "" || artists == "") {
                alert("Please fill in all fields!");
            }
            else {
                UpdatePost();
            }
        }   
    }

    function UpdatePost() {
        XMLhttp = new XMLHttpRequest();

        XMLhttp.open("POST", "/Products/EditSongAjax", true);
        XMLhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttp.onreadystatechange = UpdateReqReady;
        sendStr = "songID=" + @ViewBag.song.ID + "&title=" + title + "&releaseDate=" + releaseDate + "&price=" + price + "&genre=" + genre + "&composer=" + composer + "&lyricist=" + lyricist + "&duration=" + duration + "&artists=" + artists + "&changeArtists=" + changeArtists;
        XMLhttp.send(sendStr);
    }
    

    function UpdateReqReady() {
        if (XMLhttp.readyState == 4 && XMLhttp.status == 200) {
            //status is inside
            alert(XMLhttp.responseText);
            document.getElementById("refresh").click();

        } else if (XMLhttp.readyState == 4) {
            alert("error! code: " + XMLhttp.status);
        }
    }
</script>


<form action="/Products/EditSong" method="post">
    <input type="text" name="songID" value="@ViewBag.song.ID" hidden="hidden"/>
    <input type="submit" id="refresh" hidden="hidden"/>
</form>